<template>
  <lay-layer
    :title="false"
    :closeBtn="false"
    type="drawer"
    area="300px"
    v-model="visible"
  >
    <div class="global-setup">
      <div class="global-setup-title">主题设置</div>
      <global-setup-theme v-model="appStore.sideTheme"></global-setup-theme>
      <global-setup-theme
        v-model="appStore.subfieldPosition"
        :options="groupOptions"
        :disabled="!appStore.subfield"
      ></global-setup-theme>
      <global-color
        v-model="appStore.themeVariable['--global-primary-color']"
      ></global-color>
      <lay-line></lay-line>
      <global-setup-item label="多选项卡">
        <lay-switch v-model="appStore.tab" size="xs"></lay-switch>
      </global-setup-item>
      <global-setup-item label="菜单层级">
        <lay-switch v-model="appStore.level" size="xs"></lay-switch>
      </global-setup-item>
      <global-setup-item label="菜单反选">
        <lay-switch v-model="appStore.inverted" size="xs"></lay-switch>
      </global-setup-item>
      <global-setup-item label="菜单折叠">
        <lay-switch v-model="appStore.collapse" size="xs"></lay-switch>
      </global-setup-item>
      <global-setup-item label="手风琴">
        <lay-switch v-model="appStore.accordion" size="xs"></lay-switch>
      </global-setup-item>
      <global-setup-item label="夜间模式">
        <lay-switch
          v-model="appStore.theme"
          onswitch-value="dark"
          unswitch-value="light"
          size="xs"
        ></lay-switch>
      </global-setup-item>
      <global-setup-item label="侧边标题">
        <lay-switch v-model="appStore.logo" size="xs"></lay-switch>
      </global-setup-item>
      <global-setup-item label="灰色模式">
        <lay-switch v-model="appStore.greyMode" size="xs"></lay-switch>
      </global-setup-item>
      <global-setup-item label="面包屑">
        <lay-switch v-model="appStore.breadcrumb" size="xs"></lay-switch>
      </global-setup-item>
      <global-setup-item label="菜单分栏">
        <lay-switch v-model="appStore.subfield" size="xs"></lay-switch>
      </global-setup-item>
      <global-setup-item label="选项卡风格">
        <lay-radio-group
          name="action"
          v-model="appStore.tagsTheme"
        >
          <lay-radio-button size="xs" value="concise">样式一</lay-radio-button>
          <lay-radio-button size="xs" value="underpainting">
            样式二
          </lay-radio-button>
          <lay-radio-button size="xs" value="designer">样式三</lay-radio-button>
        </lay-radio-group>
      </global-setup-item>
      <div style="padding: 15px">
        <lay-button border="green" border-style="dashed" :fluid="true" @click="save"
          >保存</lay-button
        >
      </div>
    </div>
  </lay-layer>
</template>

<script lang="ts">
export default {
  name: 'GlobalSetup'
}
</script>

<script lang="ts" setup>
import globalSetupItem from './GlobalSetupItem.vue'
import globalSetupTheme from './GlobalSetupTheme.vue'
import globalColor from './GlobalColor.vue'
import { useAppStore } from '../../store/app'
import { ref, watch } from 'vue'
import webosutils from "webosutils";
import { layer } from '@layui/layer-vue'
const appStore = useAppStore()
const emits = defineEmits(['update:modelValue'])

interface SetupProps {
  modelValue: boolean
}

const props = withDefaults(defineProps<SetupProps>(), {
  modelValue: false
})

const groupOptions = ref([
  {
    logo: '#28333e',
    head: 'white',
    side: '#28333e',
    body: '#f4f5f7',
    value: 'side'
  },
  {
    logo: '#28333e',
    head: '#28333e',
    side: 'white',
    body: '#f4f5f7',
    value: 'head'
  }
])

const visible = ref(props.modelValue)

const save=()=>{
  // tab: true,
  //     logo: true,
  //     level: true,
  //     inverted: false,
  //     routerAlive: true,
  //     collapse: false,
  //     subfield: false,
  //     locale: "zh_CN",
  //     subfieldPosition: "side",
  //     theme: 'light',
  //     breadcrumb: true,
  //     sideWidth: "220px",
  //     sideTheme: 'dark',
  //     greyMode: false,
  //     accordion: true,
  //     tagsTheme: 'concise',
  //     keepAliveList: [],
  //     themeVariable: {
  //       "--global-checked-color": "#5fb878",
  //       "--global-primary-color": "#009688",
  //       "--global-normal-color": "#1e9fff",
  //       "--global-danger-color": "#ff5722",
  //       "--global-warm-color": "#ffb800",
  //     },
  let them=new Object() as any;
  them.tab= appStore.tab;
  them.logo= appStore.logo;
  them.level= appStore.level;
  them.inverted= appStore.inverted;
  them.routerAlive= appStore.routerAlive;
  them.collapse= appStore.collapse;
  them.subfield= appStore.subfield;
  them.locale= appStore.locale;
  them.subfieldPosition= appStore.subfieldPosition;
  them.theme= appStore.theme;
  them.breadcrumb= appStore.breadcrumb;
  them.sideWidth= appStore.sideWidth;
  them.sideTheme= appStore.sideTheme;
  them.greyMode= appStore.greyMode;
  them.accordion= appStore.accordion;
  them.tagsTheme= appStore.tagsTheme;
  them.themeVariable= appStore.themeVariable;
    console.log(JSON.stringify(them));
  webosutils.http.post("/v1/api/users/addUsertTheme", {data:JSON.stringify(them)}).then((resp: any) => {
        if (resp.success) {
           
          layer.msg("保存成功！");

          
        }else{
          layer.msg(resp.msg);
        }

      }).catch(() => {
        layer.msg("网络错误");
        //console.log("错误！");
      });

}
watch(visible, (val) => {
  debugger
  emits('update:modelValue', val)
})

watch(
  appStore.themeVariable,
  () => {
    appStore.themeVariable['--global-checked-color'] =
      appStore.themeVariable['--global-primary-color']
  },
  { immediate: true, deep: true }
)

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val
  }
)
</script>

<style>
.global-setup {
  padding: 10px;
}

.global-setup-title {
  font-size: 13px;
  margin-bottom: 10px;
  padding: 10px 10px 0px 10px;
}
.global-setup .layui-colorpicker {
  margin-right: 10px;
}
</style>
